import React from 'react'
import { BaseListPage, IBaseListPageState, IBaseListPageProps, http, UdModal, columnRenders, IUdDetailItem, UdDetail } from '@/lib';
import { Table } from 'antd';
import ButtonGroup from 'antd/lib/button/button-group';
import _ from 'lodash';
import './detail.css'
import apis from '@/apis/AboutQuota';
import CurrentMonthPinModel from '../../MonthlyQuotaAllocation/List/components/CurrentMonthPinModel';
import { EDealerType } from '../../AdjustTheRecord/List';
import moment from 'moment';

export default class ApplicationFormDetail extends BaseListPage<ApplicationFormDetailProps, ApplicationFormDetailState>{
  modal: any;
  constructor(props) {
    super(props)
    this.state = {
      title: "配额下达申请单明细",
      rowKey: 'id',
      content: '',
      brandName: '',
      status: '',
      traceCode: '',
      brandCode: '',
      Total: '',
      queryApi: (params) => {
        console.log(props);
        let traceCode = props.match.params.businessKey
        let brandCode = props.match.params.brandCode
        this.setState({
          brandName: props.match.params.brandName,
          status: props.match.params.approvalStatus,
          traceCode,
          brandCode
        })
        return http.get(apis.QuotaDetailPage, { params: { ...params, traceCode, brandCode } })
      },
      method: 'GET',
      columns: [
        ['序号', 'id', (text, record, index) => index + 1, { fixedWidth: '40px' }],
        { title: '客户名称', key: 'dealerName', dataIndex: 'dealerName', minWidth: '160px' },
        { title: '客户类型', key: 'dealerType', dataIndex: 'dealerType', minWidth: '70px', render: columnRenders.enum(EDealerType) },
        { title: '物料分类名称', key: 'groupName', dataIndex: 'groupName', minWidth: '120px' },
        {
          title: '本月动销/件',
          key: 'nowMove',
          minWidth: '70px',
          render: (record) => <a onClick={() => this.handeltoNextDetail(record)}>{record.nowMove}</a>
        },
        {
          title: '理论配额值/件',
          key: 'quotaCountNum',
          dataIndex: 'quotaCountNum',
          minWidth: '80px',
        },
        {
          title: '片区申请配额/件',
          key: 'quotaNum',
          dataIndex: 'quotaNum',
          minWidth: '90px',
        },
        { title: '实际配额/件', dataIndex: 'realityQuotaNum', minWidth: '70px' },
        { title: '有效开始时间', key: 'quotaStartTime', dataIndex: 'quotaStartTime', minWidth: '80px', render: (text) => text && moment(text).format('YYYY-MM-DD') },
        { title: '有效结束时间', key: 'quotaEndTime', dataIndex: 'quotaEndTime', minWidth: '80px', render: (text) => text && moment(text).format('YYYY-MM-DD') },
        { title: '备注', key: 'remark', dataIndex: 'remark', minWidth: '60px' },
      ],
      tableProps: {
        scroll: { x: true }
      },
      onBack: () => this.props.history.goBack(),

    }
  }
  componentDidMount() {
    super.componentDidMount()
    this.handelget(this.props)
  }
  private handelget = (props) => {
    let traceCode = props.match.params.businessKey
    let brandCode = props.match.params.brandCode
    http.get(apis.getMaterialTotal, { params: { brandCode, traceCode } }).then(resp => {
      this.setState({ Total: resp.data })
    })
  }
  render() {
    return (
      super.render({
        header: <HeaderText
          brandName={this.state.brandName}
          traceCode={this.state.traceCode}
          status={this.state.status}
          Total={this.state.Total}
        />
      })
    )
  }
  private handeltoNextDetail = (record) => {
    let brandCode = this.state.brandCode
    let traceCode = record.dealerCode
    UdModal.open({
      title: '本月动销',
      width: 800,
      content: <CurrentMonthPinModel
        brandCode={brandCode}
        dealerCode={traceCode}
        groupId={record.productGroupId}
      />
    })
  }
}


const HeaderText = (props) => {
  const items: IUdDetailItem[] = [
    {
      title: '配额编号',
      dataIndex: 'traceCode',
      col: { span: 5 },
    },
    {
      title: '销售组织',
      dataIndex: 'brandName',
      col: { span: 5 },
    },
    {
      title: '审批状态',
      dataIndex: 'status',
      col: { span: 4 },
      render: (text) => text == 'AUDITING' ? '审核中' : text == 'AUDITSUCC' ? '审核通过' : '审核失败'
    },
    {
      title: '客户数量',
      dataIndex: 'dealerCount',
      col: { span: 5 },
    },
    {
      title: '申请配额总量',
      dataIndex: 'quotaCount',
      col: { span: 5 },
    },
  ]
  const data = { traceCode: props.traceCode, brandName: props.brandName, status: props.status, dealerCount: props.Total.dealerCount, quotaCount: props.Total.quotaCount }
  return (
    <div className='ud-detail left-align-label'>
      <UdDetail items={items} dataSource={data} />
    </div>
  )
}
interface ApplicationFormDetailState extends IBaseListPageState {
  content: any
  brandName: string
  status: string
  traceCode: string
  brandCode: string
  Total: any
}

interface ApplicationFormDetailProps extends IBaseListPageProps {

}